<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/html5shiv.min.js"></script>
  </head>
  <body>
    <!--头部-->
    <div class="fixed">
      <div class="black"></div>
      <header class="Head_title">
        <div class="wrap clearFix">
          <h1 class="logo">
            <a href="#">
              <img src="img/logo.png" />
            </a>
          </h1>
          <ul class="List">
            <li id="active">
              <a class="nav" href="index.html">首页</a>
            </li>
            <li class="drop-menu">
              <p><a class="nav" href="privilege.html">特权与等级</a></p>
              <div class="growup">
                <div class="mask"></div>
                <p class="wrap grade clearFix">
                  <a href="privilege.html">成长等级</a>
                  <a href="#">全部特权</a>
                </p>
              </div>
            </li>
            <li>
              <a class="nav" href="active.html">最新活动</a>
            </li>
            <li>
              <a class="nav" href="annualFee.html">年费专区</a>
            </li>
            <li>
              <a class="nav" href="paybag.html" target="_blank">付费音乐包</a>
            </li>
          </ul>
          <p class="login">您还没有登录，<a href="#">马上登录</a></p>
        </div>
      </header>
    </div>
    <section class="Head">
      <!--头部轮播图-->
      <div class="wrap Green clearFix">
        <h2 class="greenDiamond">
          <a href="#">
            <img src="img/green.png" />
          </a>
        </h2>
        <p class="slogan">
          <a href="#">
            <img src="img/music.png" />
          </a>
        </p>
        <div class="btn">
          <a href="#">立即开通</a>
        </div>
      </div>
      <!--头部选项模块-->
      <div class="option">
        <div class="opacity"></div>
        <div class="wrap clearFix">
          <a class="luxury action" href="#"><span></span></a>
          <a class="annualFee" href="#"><span></span></a>
          <a class="payBag" href="#"><span></span></a>
          <a class="arrow" href="#"></a>
        </div>
      </div>
    </section>
    <!--主题，列表-->
    <main>
      <section class="Recommend">
        <div class="null"></div>
        <div class="text">
          <div class="wrap">
            <h3 class="Uncompromising"></h3>
            <p class="paragraph"></p>
            <ul class="downLoad d_1 clearFix">
              <li>
                <a class="super_1" href="#">
                  <span>高品质音乐下载</span>
                </a>
              </li>
              <li>
                <a class="super_2" href="#">
                  <span>无损音乐下载</span>
                </a>
              </li>
              <li>
                <a class="super_3" href="#">
                  <span>付费音乐下载</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="Recommend">
        <div class="null null_2"></div>
        <div class="wrap">
          <h3 class="Uncompromising Un_2"></h3>
          <p class="paragraph p_2"></p>
          <ul class="downLoad d_2 clearFix">
            <li>
              <a class="super_4" href="#">
                <span>个性主题</span>
              </a>
            </li>
            <li>
              <a class="super_5" href="#">
                <span>歌词海报字体</span>
              </a>
            </li>
            <li>
              <a class="super_6" href="#">
                <span>个性弹幕气泡</span>
              </a>
            </li>
            <li>
              <a class="super_7" href="#">
                <span>QQ音乐首唱会</span>
              </a>
            </li>
          </ul>
        </div>
      </section>
      <section class="Recommend">
        <div class="null null_3"></div>
        <div class="wrap">
          <h3 class="Uncompromising Un_3"></h3>
          <p class="paragraph p_3"></p>
          <ul class="downLoad d_1 clearFix">
            <li>
              <a class="super_8" href="#">
                <span>闪电尊贵图标</span>
              </a>
            </li>
            <li>
              <a class="super_9" href="#">
                <span>付费音乐专属图标</span>
              </a>
            </li>
            <li>
              <a class="super_10" href="#">
                <span>成长加速</span>
              </a>
            </li>
          </ul>
        </div>
      </section>
      <section class="Recommend">
        <div class="null null_4"></div>
        <div class="wrap">
          <h3 class="Uncompromising Un_4"></h3>
          <p class="paragraph p_4"></p>
          <ul class="downLoad d_4 clearFix">
            <li>
              <a class="super_11" href="#">
                <span>QQ空间背景音乐</span>
              </a>
            </li>
            <li>
              <a class="super_12" href="#">
                <span>个性音乐</span>
              </a>
            </li>
          </ul>
        </div>
      </section>
    </main>
    <!--页面底部-->
    <footer class="About">
      <div class="wrap">
        <p class="service">
          <a href="#">关于腾讯</a>
          <span>|</span>
          <a href="#">About Tencent</a>
          <span>|</span>
          <a href="#">服务条款</a>
          <span>|</span>
          <a href="#">用户服务协议</a>
          <span>|</span>
          <a href="#">广告服务</a>
          <span>|</span>
          <a href="#">腾讯招聘</a>
          <span>|</span>
          <a href="#">客服中心</a>
          <span>|</span>
          <a href="#">网站导航</a>
        </p>
        <p class="Copyright">
          <span>Copyright © 1998 - 2017 Tencent.</span>
          <a href="#">All Rights Reserved.</a>
        </p>
        <p class="culture">
          <span>腾讯公司</span>
          <a href="#">版权所有</a>
          <a href="#"> 腾讯网络文化经营许可证</a>
        </p>
      </div>
    </footer>
    <!--侧边导航栏-->
    <aside class="asideNav">
      <div class="subNav">
        <a class="ico QQ" href="#"></a>
        <div class="subNavHover" id="Hover_1">
          <h4>官方手Q公众号</h4>
          <img src="img/code.png" />
          <p class="clearFix">
            <span>扫码免费领</span>
            <span><strong>7天</strong>豪华绿钻</span>
          </p>
        </div>
      </div>
      <div class="subNav">
        <a class="ico WeChat" href="#"></a>
        <div class="subNavHover" id="Hover_2">
          <h4>官方微信公众号</h4>
          <img src="img/code.png" />
          <p class="clearFix">
            <span>扫码免费领</span>
            <span><strong>7天</strong>豪华绿钻</span>
          </p>
        </div>
      </div>
      <div class="subNav">
        <a class="ico interest" href="#"></a>
        <div class="subNavHover_2" id="Hover_3">兴趣部落</div>
      </div>
      <div class="subNav">
        <a class="ico exchange" href="#"></a>
        <div class="subNavHover_2" id="Hover_4">兑换中心</div>
      </div>
      <div class="subNav">
        <a class="ico customer" href="#"></a>
        <div class="subNavHover_2" id="Hover_5">客服中心</div>
      </div>
    </aside>
  </body>
</html>
